<%@page contentType="text/html; charset=utf-8"%>
<%@include file="/WEB-INF/views/common/taglibs.jspf" %>
<title>系统用户管理</title>

<link rel="stylesheet" href="${ctx}/static/admin/ace/css/jquery-ui.css" />
<link rel="stylesheet" href="${ctx}/static/admin/ace/css/jquery.gritter.css" />
<link rel="stylesheet" href="${ctx}/static/admin/ace/css/datepicker.css" />
<div class="row">
	<div class="col-xs-12">
		<!-- PAGE CONTENT BEGINS -->
		<div class="row">
			<div class="col-xs-12">
				<div class="btn-group">
					<button onclick="formDialog();" class="btn btn-primary btn-sm btn-sm">
						<i class="glyphicon glyphicon-plus"></i>
						添加
					</button>
					<button class="btn btn-info btn-sm">
						<i class="ace-icon fa fa-pencil-square-o"></i>
						编辑
					</button>
					<button class="btn btn-danger btn-sm">
						<i class="ace-icon fa fa-trash"></i>
						删除
					</button>
					<button class="btn btn-success btn-sm">
						<i class="ace-icon fa fa-refresh"></i>
						刷新
					</button>
					
					
				</div>
				
				
			</div>
		</div>
		<div class="space-6"></div>
		
		<div class="row">
			<div class="col-xs-12">
				<form>
					<span class="input-icon pull-right">
						<input type="text" class="input-sm input-medium" placeholder="Search ...">
						<i class="ace-icon fa fa-search nav-search-icon blue"></i>
					</span>
					<span class="input-icon">
						<input type="text" class="date-picker input-sm input-medium" data-date-format="yyyy-mm-dd">
						<i class="ace-icon fa fa-calendar blue"></i>
					</span>
					<span class="input-icon">
						<input type="text" class="date-picker input-sm input-medium" data-date-format="yyyy-mm-dd">
						<i class="ace-icon fa fa-calendar blue"></i>
					</span>
					<span class="input-icon">
						<input type="text" placeholder="关键字" class="input-sm">
						<i class="ace-icon fa fa-filter blue"></i>
					</span>
					<button class="btn btn-purple btn-xs">
						<i class="ace-icon fa fa-search"></i>
						搜索
					</button>
					<button class="btn btn-pink btn-xs">
						<i class="ace-icon fa fa-share bigger-100"></i>
						重置
					</button>
					<button class="btn btn-success btn-xs">
						<i class="ace-icon fa fa-search"></i>
						刷新
					</button>
				</form>
				
			</div>
		</div>
		<div class="space-6"></div>
		
		<div class="row">
			<div class="col-xs-12">
				<table id="dataTables" class="table table-striped table-bordered table-hover">
			        <thead>
			        <tr>
			            <th class="center">
							<label class="position-relative">
								<input type="checkbox" class="ace" />
								<span class="lbl"></span>
							</label>
						</th>
			            <th>序号</th>
			            <th>用户名</th>
			            <th>密码</th>
			            <th>操作</th>
			        </tr>
			        </thead>
			        <tbody></tbody>
			        <!-- tbody是必须的 -->
			    </table>
				
			</div>
		</div>
		
		
		<!-- PAGE CONTENT ENDS -->
	</div><!-- /.col -->
</div><!-- /.row -->


<!--
[if lte IE 8]>
  <script src="${ctx}/static/admin/ace/js/excanvas.js"></script>
<![endif]
-->


<!--定义操作列按钮模板-->
<script id="tpl" type="text/x-handlebars-template">
    {{#each func}}
		<button class="btn btn-xs btn-{{this.type}}" onclick="{{this.fn}}">
			<i class="ace-icon fa fa-{{this.icon}}"></i>
				{{this.name}}
		</button>
    {{/each}}
</script>
<!--定义表格的搜索表单模板-->
<script id="tpl-search" type="text/x-handlebars-template">

</script>

<script type="text/javascript">
var scripts = [null, 
               "${ctx}/static/admin/ace/js/jquery-ui.js",
               "${ctx}/static/admin/ace/js/jquery.gritter.js", 
               "${ctx}/static/admin/ace/js/date-time/bootstrap-datepicker.js", 
               "${ctx}/static/admin/ace/js/date-time/bootstrap-timepicker.js", 
               "${ctx}/static/admin/ace/js/date-time/daterangepicker.js", 
               "${ctx}/static/admin/ace/js/jquery.dataTables.js", 
               "${ctx}/static/admin/ace/js/jquery.dataTables.bootstrap.js", 
               "${ctx}/static/plugins/handlebars-v3.0.3.js", 
               "${ctx}/static/plugins/jquery.formautofill.min.js", 
               null];
$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
	jQuery(function($) {
		$('.input-daterange').datepicker({autoclose:true});
		$('.date-picker').datepicker({
			autoclose: true,
			todayHighlight: true
		})
		
		initDataTable() ;
	});
});

function initDataTable() {
    //预编译模板
	var tpl = $("#tpl").html();
    var template = Handlebars.compile(tpl);
    
	var t = $("#dataTables").DataTable({
			bProcessing: true,
			bServerSide: true,
			bAutoWidth: false,
		 	ajax: {url: "${ctx}/admin/sys/user/datatable"},
			sPaginationType: "full_numbers",
            columns: [
                {"data": null, "bSortable": false},
                {"data": null, "bSortable": false},
                {"data": "username", "bSortable": false},
                {"data": "password", "bSortable": false},
                {"data": null, "bSortable": false}
            ],
            columnDefs: [
               {
					targets: 0,
					sClass: "center",
					render: function (a, b, c, d) {
						var s = '<label class="position-relative"><input type="checkbox" class="ace" /><span class="lbl"></span></label>';
						return s;
   					}
               },
               {
					"searchable": false,
					"orderable": false,
					"targets": 1
               },
               {
					targets: 4,
					render: function (a, b, c, d) {
						var context = {
							func: [
								{"name": "修改", "type": "info", "icon": "pencil-square-o", "fn": "formDialog(\'" + c.id + "\')"},
								{"name": "删除", "type": "danger", "icon": "trash", "fn": "del(\'" + c.id + "\')"}
							]
						};
						var html = template(context);
						return html;
					}
               }
           ],
           "order": [[1, 'asc']],
           "language": {
        		"sProcessing":"正在加载中......",
        		"sLengthMenu":"_MENU_",
        		"sZeroRecords":"对不起，查询不到相关数据！",
        		"sEmptyTable":"表中无数据存在！",
        		"sInfo":"第 _PAGE_ 页 / 总 _PAGES_ 页，共_TOTAL_条记录",
        		"sInfoFiltered":"数据表中共为_MAX_条记录",
        		"sSearch":"快速搜索",
        		"sInfoEmpty": "共_TOTAL_条记录",
        		"oPaginate":{
        			"sFirst":"首页",
        			"sPrevious":"上一页",
        			"sNext":"下一页",
        			"sLast":"末页"
        		}
        	},
           "dom":"" +
           		 "t" +
         		 "<'row'<'col-xs-12' <'float_left'i> "+
         		 "<'float_right'l><'float_right'p>> >",
			initComplete: function () {
			}
	});
	
	//复选框
	t.on("click", "#dataTables th input:checkbox" , function(){
		var that = this;
		$(this).closest('table').find('tr > td:first-child input:checkbox').each(function(){
			this.checked = that.checked;
			$(this).closest('tr').toggleClass('selected');
		});
	});
	
	//序号
	t.on("draw", function () {
		t.column(1, {search:'applied', order:'applied'}).nodes().each( function (cell, i){
			cell.innerHTML = i+1;
        });
	});
}

var dialogIndex ;
function formDialog(id){
	var url = "${ctx}/admin/sys/user/form" ;
	if(undefined != id && id != "") {
		url = "${ctx}/admin/sys/user/form?id="+id ;
	}
	var loadIndex = layer.load(0, {shade : [0.3]});
	$.ajax({
		url: url, cache:false
	}).error(function(event, XMLHttpRequest, ajaxOptions, thrownError){
		if(event.status == 404) { }
	}).done(function(result){
		dialogIndex = layer.open({
		    type: 1, //page层
		    area: ['900px', '500px'],
		    title: '添加',
		    skin: 'seaning', //墨绿风格
		    shade: 0.6, //遮罩透明度
		    shift: 1, //0-6的动画形式，-1不开启 
		    scrollbar: false, //禁用浏览器滚动条
		    content: result,
		    success: function(layero, index){ layer.close(loadIndex); },
		    btn: ['提交', '取消'],
		    yes: function(index, layero){
		    	if(undefined == id) {
		    		add() ;
		    	} else {
		    		edit() ;
		    	}
		    },cancel: function(index){}
		}); 
	});
};


function add() {
	var msgIndex = layer.msg('数据提交中...', { icon: 17, shade: [0]}); 
	var data = $.shine.serializeObject("#form");
	
	$.ajax({
		type: "POST",
		url: "${ctx}/admin/sys/user/add",
		data: data, dataType: "JSON",
	}).error(function(event, XMLHttpRequest, ajaxOptions, thrownError){
		layer.close(msgIndex);
	}).done(function(result){
		if(result.error != null  && result.error != undefined) {
			layer.msg('发生错误！', { icon: 2, time: 1000, shade: [0] }, function(){ layer.close(msgIndex); }); 
		} else {
			layer.close(msgIndex);
			layer.close(dialogIndex) ;
			$.gritter.add({
				text: '<i class="ace-icon fa fa-check bigger-150"></i>&nbsp;&nbsp;&nbsp;<span class="bigger-150">'+result.message+'</span>',
				class_name: 'gritter-success'
			});
		}
	});
}

function edit() {
	var msgIndex = layer.msg('数据提交中...', { icon: 17, shade: [0]}); 
	var data = $.shine.serializeObject("#form");
	
	$.ajax({
		type: "POST",
		url: "${ctx}/admin/sys/user/update",
		data: data, dataType: "JSON",
	}).error(function(event, XMLHttpRequest, ajaxOptions, thrownError){
		layer.close(msgIndex);
	}).done(function(result){
		if(result.error != null  && result.error != undefined) {
			layer.msg('发生错误！', { icon: 2, time: 1000, shade: [0] }, function(){ layer.close(msgIndex); }); 
		} else {
			layer.close(msgIndex);
			layer.close(dialogIndex) ;
			$.gritter.add({
				text: '<i class="ace-icon fa fa-check bigger-150"></i>&nbsp;&nbsp;&nbsp;<span class="bigger-150">'+result.message+'</span>',
				class_name: 'gritter-success'
			});
		}
	});
}
function del(id) {
	$.ajax({
		type: "GET", dataType: "JSON",
		url: "${ctx}/admin/sys/user/delete/"+id,
	}).error(function(event, XMLHttpRequest, ajaxOptions, thrownError){
		layer.msg('删除发生错误！', { icon: 2, time: 1000, shade: [0] }); 
	}).done(function(result){
		if(result.error != null  && result.error != undefined) {
			layer.msg('删除发生错误！', { icon: 2, time: 1000, shade: [0] }); 
		} else {
			$.gritter.add({
				text: '<i class="ace-icon fa fa-check bigger-150"></i>&nbsp;&nbsp;&nbsp;<span class="bigger-150">'+result.message+'</span>',
				class_name: 'gritter-success'
			});
		}
	});
}

</script>
